<!--
 * @Author: 冕上 cxm66888@163.com
 * @Date: 2024-10-19 17:16:21
 * @LastEditors: 冕上 cxm66888@163.com
 * @LastEditTime: 2024-11-19 11:51:18
 * @Description: 
 * 
 * Copyright (c) 2024 by xiaoMing.Cao, All Rights Reserved. 
-->
<!--
 * @Author: 冕上 cxm66888@163.com
 * @Date: 2024-10-15 16:02:56
 * @LastEditors: 冕上 cxm66888@163.com
 * @LastEditTime: 2024-10-17 17:50:49
 * @Description: 
 * 
 * Copyright (c) 2024 by xiaoMing.Cao, All Rights Reserved. 
-->
<template>
  <div class="bottle">
    <div class="bottle-head">
      <h3>
        系统用户
        <el-button type="primary" :icon="Switch" @click="getUser">换一批</el-button>
      </h3>
      <div class="user-list">
        <ul class="list-ul">
          <li v-for="item in userData.list" :key="item._id" @click="selectUser(item)">
            <el-avatar shape="square" :size="50" :src="item.url" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottle-mian">
      <el-form :model="form" ref="ruleFormRef" class="demo-form-inline" size="default" :rules="rules">
        <el-form-item label="用户昵称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="用户头像" prop="imageUrl">
          <uploadImg :imageUrl="form.imageUrl" @success="uploadSuccess" @delete="deleteImage"></uploadImg>
        </el-form-item>
        <el-form-item label="用户性别" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio value="male">男</el-radio>
            <el-radio value="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布内容" prop="content">
          <el-input v-model="form.content" type="textarea" rows="4" style="width: 400px" />
        </el-form-item>
        <el-form-item label="选择标签">
          <el-checkbox-group v-model="form.type">
            <el-checkbox value="分享生活日常">分享生活日常</el-checkbox>
            <el-checkbox value="美食日记">美食日记</el-checkbox>
            <el-checkbox value="新人报道">新人报道</el-checkbox>
            <el-checkbox value="宠物乐园">宠物乐园</el-checkbox>
            <el-checkbox value="职场人生">职场人生</el-checkbox>
            <el-checkbox value="时尚穿搭">时尚穿搭</el-checkbox>
            <el-checkbox value="旅行日记">旅行日记</el-checkbox>
            <el-checkbox value="电影时刻">电影时刻</el-checkbox>
            <el-checkbox value="健身打卡">健身打卡</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="选择图片">
          <div class="image-list">
            <div v-for="(src, index) in form.imageArray" :key="index" class="image-item">
              <el-image style="width: 100px; height: 100px" :src="src" fit="fill" />
              <el-button type="danger" size="small" circle class="delete-image-btn" @click="deleteImageFromArray(index)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
            <uploadImg v-if="form.imageArray.length < 9" @success="imgSuccess"></uploadImg>
          </div>
        </el-form-item>
        <el-form-item label="选择地址">
          <el-cascader size="large" :options="provinceAndCityData" v-model="selectedOptions"></el-cascader>
        </el-form-item>
        <el-form-item label="选择发布时间">
          <el-date-picker v-model="form.publicTime" @change="dateChange" type="datetime" placeholder="发布时间" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, reactive } from 'vue';
  import { userList } from '@/api/user';
  import { Switch, Delete } from '@element-plus/icons-vue';
  import uploadImg from '@/components/uploadImg/index.vue';
  import { publishTrends } from '@/api/role';
  import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data';

  const rules = {
    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    resource: [{ required: true, message: '请选择性别', trigger: 'change' }],
    imageUrl: [{ required: true, message: '请选择头像', trigger: 'change' }],
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
  };
  const ruleFormRef = ref(null);
  const selectedOptions = ref([]);
  const bottleData = reactive({
    // 真实瓶子
    realBottle: []
  });
  const form = reactive({
    name: '',
    type: [],
    imageUrl: '',
    content: '',
    publicTime: '',
    imageArray: []
  });

  const userData = reactive({
    list: []
  });
  const getUser = () => {
    userList().then(res => {
      userData.list = res.data;
    });
  };
  getUser();
  const submitForm = async () => {
    await ruleFormRef.value.validate(async (valid, fields) => {
      if (valid) {
        console.log('submit!', selectedOptions);
        const topic = form.type.join(',');
        const result = await publishTrends({
          content: form.content,
          gender: form.resource,
          nickname: form.name,
          avatarUrl: form.imageUrl,
          addressData: {
            latitude: 0, // 纬度
            longitude: 0, // 经度
            address: '',
            addressDetail: '',
            adcode: '',
            nation: '中国',
            province: codeToText[selectedOptions.value[0]],
            city: codeToText[selectedOptions.value[1]],
            district: ''
          },
          topic,
          publicTime: form.publicTime,
          imagesUrl: form.imageArray
        });
        if (result.code == 200) {
          ElMessage({
            type: 'success',
            message: '发布成功'
          });
          // 清空内容
          form.content = '';
          form.type = [];
          form.imageArray = [];
          selectedOptions.value = [];
          // 清空头像
          form.imageUrl = '';
          form.nickname = '';
          form.resource = '';
          // 清空form验证信息
          ruleFormRef.value.resetFields();
        }
      } else {
        console.log('error submit!', fields);
      }
    });
  };

  // 选择用户
  const selectUser = item => {
    form.name = item.name;
    form.imageUrl = item.url;
  };

  // 图片上传回调
  const uploadSuccess = imgPath => {
    form.imageUrl = imgPath;
  };

  const deleteImage = () => {
    form.imageUrl = '';
  };

  const imgSuccess = imgPath => {
    form.imageArray.push(imgPath);
  };

  const deleteImageFromArray = index => {
    form.imageArray.splice(index, 1);
  };

  const dateChange = date => {
    console.log(2133, date);
    // 判断所选时间不能小于当前时间
    if (date < new Date()) {
      ElMessage({
        type: 'error',
        message: '发布时间不能小于当前时间'
      });
      // 清空所选时间
      form.publicTime = '';
    }
  };
</script>
<style scoped lang="scss">
  .bottle {
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .bottle-head,
    .bottle-mian {
      background-color: #fff;
      display: flex;
      padding: 15px;
      box-sizing: border-box;
      width: 100%;
      margin-bottom: 15px;
      flex-direction: column;
    }

    :deep .el-form-item__label {
      font-weight: 700;
    }
  }
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  .el-table__header {
    background-color: #d3e3fd;
  }
  .el-form-item__label {
    font-weight: 700;
  }
  .avatar-uploader .avatar {
    width: 88px;
    height: 88px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #dfdfdf;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 88px;
    height: 88px;
    text-align: center;
    border: 1px dashed #dfdfdf;
  }

  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }

  .image-item {
    position: relative;
    display: inline-block;
  }

  .delete-image-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: rgba(255, 255, 255, 0.9);
    border: none;

    &:hover {
      background: #fff;
    }
  }
  .user-list {
    width: 100%;
    .list-ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: 0;
      margin: 0;
      cursor: pointer;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 30px;
        background-color: #f5f5f6;
        border-radius: 8px;
        padding: 10px;
        cursor: pointer;
        p {
          padding: 0;
          margin: 0;
          margin-top: 10px;
        }
      }
    }
  }
</style>
